<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>合同列表</span>
      <div style="float: right">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="editHandler"
        >新建</el-button>
        <el-button
          type="primary"
          icon="el-icon-close"
          size="mini"
          @click="closeContractBatch"
        >关闭</el-button>
        <el-button
          type="primary"
          icon="el-icon-delete"
          size="mini"
          @click="deleteContractBatch"
        >删除</el-button>
      </div>
    </div>
    <el-table :data="table.items" @selection-change="handlerSelectionChange">
      <el-table-column type="selection" />
      <el-table-column label="ID" width="200px">
        <template slot-scope="{ row }">
          {{ row.id }}
        </template>
      </el-table-column>
      <el-table-column label="合同名称">
        <template slot-scope="{ row }">
          <el-button type="text" @click="detail(row)">{{
            row.contractName
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="创建日期" width="100px">
        <template slot-scope="{ row }">
          {{ row.timestamp }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px">
        <template slot-scope="{ row }">
          <el-button
            type="text"
            size="mini"
            @click="editHandler(row)"
          >编辑</el-button>
          <el-button
            type="text"
            size="mini"
            @click="closeContract(row.id)"
          >关闭</el-button>
          <el-button
            type="text"
            size="mini"
            @click="deleteContract(row.id)"
          >删除</el-button>
          <el-button
            type="text"
            size="mini"
            @click="editHandler(row.id)"
          >附件</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :background="true"
      :total="table.total"
      :current-page="page.currentPage"
      :page-size="page.pageSize"
      @current-change="pageChange"
    />
    <table-detail v-model="detailShow" title="合同信息" :data="detailData" />
    <table-edit v-model="edit.show" :title="edit.title" :data="edit.data" />
  </el-card>
</template>

<script>
import { getContractList } from '@/api/contract'
import Pagination from '@/components/Pagination'
import tableDetail from './TableDetail.vue'
import tableEdit from './TableEdit.vue'
export default {
  name: 'TableData',
  components: {
    tableDetail,
    tableEdit,
    Pagination
  },
  data() {
    return {
      table: {
        items: [],
        total: 0
      },
      selectionData: [],
      detailShow: false,
      detailData: {},
      edit: {
        data: {},
        show: false,
        title: null
      },
      page: {
        currentPage: 1,
        pageSize: 10
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData(query) {
      getContractList(query).then((response) => {
        this.table = response.data
      })
    },
    pageChange() {},
    detail(data) {
      this.detailShow = true
      this.detailData = data
    },
    handlerSelectionChange(val) {
      this.selectionData = val.map((item) => {
        return item.id
      })
      console.log(this.selectionData)
    },
    editHandler(row) {
      console.log(Object.prototype.toString.call(row))
      this.edit.show = true
      if (Object.prototype.toString.call(row) !== '[object PointerEvent]') {
        this.edit.data = row
        this.edit.title = '编辑合同'
      } else {
        this.edit.data = {}
        this.edit.title = '创建合同'
      }
    },
    closeContract(id) {
      this.selectionData.push(id)
      this.closeContractBatch()
    },
    closeContractBatch() {
      if (this.checkSelected()) {
        this.$confirm('确认关闭合同？关闭合同后无法进行编辑', '关闭合同').then(r => {
          console.log(this.selectionData)
          this.selectionData = []
        }
        ).catch(e => {
          console.log(e)
        })
      }
    },
    deleteContract(id) {
      this.selectionData.push(id)
      this.deleteContractBatch()
    },
    deleteContractBatch() {
      if (this.checkSelected()) {
        this.$confirm('确定删除合同？删除合同后无法恢复', '删除合同').then(r => {
          console.log(this.selectionData)
          this.selectionData = []
        }
        ).catch(e => {
          console.log(e)
        })
      }
    },
    checkSelected() {
      if (this.selectionData.length === 0) {
        this.$message({ message: '请选择一条记录', type: 'warning' })
        return false
      }
      return true
    }
  }
}
</script>

<style>

</style>
